<!-- 组织管理 -->
<template>
  <div class="containerOrgin">
    <el-card style="margin-top:0">
      <div class="sjtj">
        组织管理
      </div>
    </el-card>
    <el-card>
      <el-button type="primary">导出</el-button>
    </el-card>
    <div class="bodyContainer">
      <el-card :style="{height: cardHeight}" class="leftCard">
        <el-tree
          :data="dataList"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-plus"
                @click="() => append(data)"
              />
              <el-button
                type="text"
                size="mini"
                icon="el-icon-minus"
                @click="() => remove(node, data)"
              />
            </span>
          </span>
        </el-tree>
      </el-card>
      <el-card class="rightCard">
        <div class="sjtj fs">编辑部门</div>
        <el-divider />
        <div class="fromDate">
          <el-form ref="form" :rules="rules" :model="form" label-width="80px" size="medium" class="from">
            <el-form-item label="部门编码" prop="name">
              <el-input v-model="form.name" placeholder="请填写部门编码" />
            </el-form-item>
            <el-form-item label="部门名称" prop="region">
              <el-select v-model="form.region" placeholder="请选择部门名称" class="select">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="公司名称" prop="name">
              <el-input v-model="form.name" placeholder="请填写公司名称" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.desc" maxlength="300" placeholder="请填写备注" show-word-limit type="textarea" />
            </el-form-item>
          </el-form>
          <div class="footer">
            <el-button type="primary" @click="onSubmit('form')">保存</el-button>
            <el-button @click="handleReset('form')">取消</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
let id = 1000
export default {
  name: 'OrganManagement',
  data() {
    const data = [{
      id: 1,
      label: '一级 1',
      children: [{
        id: 4,
        label: '二级 1-1',
        children: [{
          id: 9,
          label: '三级 1-1-1'
        }, {
          id: 10,
          label: '三级 1-1-2'
        }]
      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }]
    return {
      cardHeight: window.innerHeight - 244 + 'px',
      dataList: JSON.parse(JSON.stringify(data)),
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 提交
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('保存成功')
        } else {
          return false
        }
      })
    },
    // 取消
    handleReset(formName) {
      this.$refs[formName].resetFields()
    },
    // 新增
    append(data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },
    // 删除
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
  .sjtj{
  border-left: 4px solid #1890ff;
  padding: 0 0 0px 10px;
  font-size: 24px;
  height: 20px;
  line-height: 20px;
  }
  .containerOrgin{
    margin: 10px;
    .bodyContainer{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-between;
    .leftCard{
      width:40%;
      margin-right: 2px;
    }
    .rightCard{
      width:60%;
      .fs{
        font-size: 18px;
      }
      .fromDate{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        .from{
          width: 500px;
          .select{
            width:420px;
          }
        }
        .footer{
          margin-top: 200px;
        }
      }
    }
  }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
